<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var btn01=document.getElementById("btn01");
            var u1=document.getElementById("u1");
            btn01.onclick=function () {
                //创建一个li
                var li=document.createElement("li");
                li.innerHTML="<li><a href='javescript:;' class='link'>新连接</a></li>";
                //将li添加到u1中
                u1.appendChild(li);
            };
            //为每一个a绑定一个单击响应函数 这样操作比较麻烦，而且这些超链接只记录已有的超链接设置事件，在新添加的超链接必须重新绑定
            var  allA=document.getElementsByTagName("a");
            // for (var i=0;i<allA.length;i++){
            //     allA[i].onclick=function () {
            //     alert("我是a的单击响应函数")
            //     }
            //我们想要的结果是 只绑定一次事件， 即可用于多个元素上，即使后面添加的元素也应用
            //我们可以绑定一个共同的祖先元素
            //为u1绑定一个单击函数  this是事件给谁绑定的 this就是谁
            u1.onclick=function (event) {
                //如果触发事件的对象是我们期望的元素，则执行 否则不执行
                //target  event中的target表示的是触发事件的对象，触发a target就是a 触发ptarget就是p
                if (event.target.className=="link"){
                    alert("我是ul的单击函数");
                }


            }
        }

    </script>
</head>
<body >
<script>
    /*我们想要的结果是 只绑定一次事件， 即可用于多个元素上，即使后面添加的元素也
    *   我们可以绑定一个共同的祖先元素
    *事件委派：指将统一绑定给元素共同的祖先元素，这样当后代元素的事件触发时，会一直冒泡到祖先元素，
    *         从而通过祖先元素的响应函数来处理事件
    *   事件委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序性能
    *    this是事件给谁绑定的 this就是谁
    *   target  event中的target表示的是触发事件的对象，触发a target就是a 触发ptarget就是p
    *
    * */
</script>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa">
    <li><p>我是p元素</p></li>
    <li><a href="javescript:;" class="link">超链接1</a></li>
    <li><a href="javescript:;" class="link">超链接2</a></li>
    <li><a href="javescript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>